<!-- 父组件与子组件之间的数据传递 -->

<!-- 引入 vue 框架 -->
<script src="vue.js"></script>

<!-- 界面显示 -->
<div id="app">
    <prpet></prpet>
</div>

<!-- 自定义组件模板 -->
<template id="child">
    <div>
        <button @click="send">发送</button>
        <input type="text" name="" id="" v-model="msg">
    </div>
</template>

<!-- 脚本声明 -->
<script>
    // 注册父组件
    Vue.component("prpet", {
        // 父组件变量 msg
        data () {
            return {
                msg : ""
            }
        },
        // 引入子组件, 组件当中 childfn 名字要给出父组件的方法名 prpetfn
        template: '<div><child @childfn = "prpetfn"></child>获取子组件的信息为：{{msg}}</div>',
        methods: {
            prpetfn(value) {
                this.msg = value;
            }
        }
    })

    // 注册子组件
    Vue.component("child", {
        template: "#child",
        data() {
            return {
                msg : ""
            };
        },
        methods: {
            send() {
                // 利用 $emit() 将父组件 childfn 事件进行拼接, 并且将 msg 传给此函数
                this.$emit('childfn', this.msg);
            }
        }
    })

    var vue = new Vue({
        el: "#app",
    })
</script>

<!-- 界面样式 -->
<style>

</style>